<template>
    <div>
        <el-table :data="bureausApplicationsList.filter(item => {return item.fromCity !== senderAddress && !item.hasReceived})" style="width: 100%">
            <el-table-column fixed prop="applicant" label="申请人地址" width="200" />
            <el-table-column prop="currentBureauAddress" label="当前社保局地址" width="200" />
            <el-table-column prop="fromCity" label="当前城市" width="120" />
            <el-table-column prop="toCity" label="转移城市" width="120" />
            <el-table-column prop="toCityBureauAddress" label="目的社保局地址" width="120" />
            <el-table-column prop="personalFund" label="个人账户" width="120" />
            <el-table-column prop="overallFund" label="公司账户" width="120" />
            <el-table-column prop="pensionInsurance" label="养老保险金" width="120" />
            <el-table-column prop="stopped" label="是否停缴" width="120" />
            <el-table-column prop="hasReceived" label="是否授权" width="120" />
            <el-table-column prop="approved" label="是否接受" width="120" />
            <el-table-column fixed="right" label="授权用户表" width="120" >
              <template #default="scope" >
                <el-button link type="primary" size="small" @click="authority(scope)" :disabled="scope.row.hasReceived"
                >授权</el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="接受用户" width="120">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="receive(scope)" :disabled="scope.row.approved"
                >接受</el-button
              >
              </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import myAxios from "../../plugins/myAxios.js"
import { onMounted } from 'vue';
import { ref } from 'vue';
// import { ElMessage, ElMessageBox } from 'element-plus'
import { ElNotification } from 'element-plus'
const bureausApplicationsList = ref([])
const senderAddress = localStorage.getItem('senderAddress')

const query = () => {
  console.log(localStorage.getItem('senderAddress'))
  myAxios.post("/query/getAllApplications", {userAddress: localStorage.getItem('senderAddress')})
  .then((res) => {
    if (res.data.code === 200) {
      // console.log(res.data.data)
      bureausApplicationsList.value = res.data.data;

      console.log(bureausApplicationsList.value[0].fromCity)
      // cookies.set('companyList', JSON.stringify(companyList.value))
    } else {
      ElNotification({title: '错误',message: `出现错误,${res.data.msg}`,type: 'error',})
    }
  })
  .catch((error) => {
      ElNotification({title: '警告',message: `没有数据`,type: 'warning',})
    });
}

// 授权逻辑
const authority = (row) => {
  console.log(row.row.applicant) // 申请人地址
  // 目的地社保局地址
  let socialSecurityBureauBo = {
    bureauAddress: row.row.toCityBureauAddress,
  } 
  console.log(row.row.toCityBureauAddress)
  myAxios.post('social/updateAuthorized',socialSecurityBureauBo)
  .then((res) => {
    if(res.data.code === 200){
      //第二次请求
      // 当前社保局地址 和申请人地址
      let applyBo = {
        applicant: row.row.applicant,
        currentBureauAddress: row.row.currentBureauAddress
      }
      myAxios.post('social/authorizeTransfer',applyBo)
      .then((res) => {
        if(res.data.code === 200){
          ElNotification({title: '成功',message: '授权成功',type: 'success',})
          query()

        }else{
          ElNotification({title: '错误',message: `接受失败,${res.data.msg}`,type: 'error',})
        }
      })
    }else{
          ElNotification({title: '错误',message: `接受失败,${res.data.msg}`,type: 'error',})
      }
  })
}

// 
const receive = (row) => {
  let applyBo = {
    applicant: row.row.applicant,
    toBureauAddress: row.row.toCityBureauAddress
  }   
  myAxios.post('social/receiveTransfer',applyBo)
  .then((res) => {
    if(res.data.code === 200){
      ElNotification({title: '成功',message: '接受成功',type: 'success',})
      query()
    }else{
      ElNotification({title: '错误',message: `接受失败,${res.data.msg}`,type: 'error',})
    }
  })
}
onMounted(() => {
  //query()
})
</script>
